import React, { useMemo } from 'react';
import ClassNames from 'classnames';
import { useRequest } from 'ahooks';
import { getLiveList } from '@/service/live';
import ListVideoCard from '@/components/ListVideoCard';
import PageLoading from '@/components/PageLoading';
import PageEmptyData from '@/components/PageEmptyData';

import styles from '../style/LiveContainer.scss';

const LiveContainer = ({ showBanner, value }) => {
  const { data, loading } = useRequest(() => getLiveList({ liveType: value === '其他' ? '娱乐' : value }));

  return useMemo(() => {
    const list = data || [];

    if (loading) {
      return (
        <PageLoading />
      );
    }
    if (!list.length) {
      return (
        <PageEmptyData />
      );
    }

    return (
      <div className={ClassNames(styles.container, { [styles.isVisibleBanner]: showBanner })}>
        <ListVideoCard list={list} rows={2} marginLeft={20} marginTop={20} />
      </div>
    );
  }, [data, loading, showBanner]);
};

export default LiveContainer;
